概 述
Typed.js 是一个 JavaScript 库，用于在网页上创建打字动画效果。
开始
CDN
<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
NPM
npm install typed.js
General ESM Usage
import Typed from 'typed.js';
const typed = new Typed('#element', {
strings: ['<i>First</i> sentence.', '& a second sentence.'],
typeSpeed: 50,
});
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
</head>
<body>
<h1><span id="typed"></span></h1>
<script>
// 初始化 Typed.js
var typed = new Typed('#typed', {
strings: ['Hello, World!', 'Welcome to Typed.js'],
typeSpeed: 50,
backSpeed: 30,
loop: true
});
</script>
</body>
</html>
常用属性
strings：一个字符串数组，包含要展示的文本内容。typeSpeed：打字速度，表示每个字符输入的延迟时间（以毫秒为单位）。startDelay：动画开始之前的延迟时间（以毫秒为单位）。backSpeed：删除速度，表示每个字符删除的延迟时间（以毫秒为单位）。backDelay：每次删除完成后的等待时间（以毫秒为单位）。loop：一个布尔值，指示动画是否应该循环播放。loopCount：限制循环播放的次数。showCursor：一个布尔值，指示是否显示光标。cursorChar：光标的字符。cursorSpeed：光标闪烁的速度（以毫秒为单位）。smartBackspace：一个布尔值，指示是否启用智能删除，根据回退速度自动调整删除时间。shuffle：一个布尔值，指示是否在打字之前随机打乱字符串数组。contentType：指定输入的内容类型，可以是'html'、'text'或'null'。onComplete：动画完成时的回调函数。